<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表达式小结</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      // js 表达式常见情况: 字面量('abc'), 变量(name), 对象属性(obj.name), 函数调用(fn()), 运算(2+2)

      //1. 测试 JSX 的子元素渲染情况

      //哪些值会渲染到网页中.
      //基本数据类型: string, number, boolean, undefined, null, symbol
      //引用数据类型: object
      // s n b u n s o =>  s n b u o => usonb
      // var v = undefined;//❌ 不渲染
      // var v = null;// ❌ 不渲染
      // var v = 521; //✅ 可以渲染
      // var v = 'i miss you';//✅ 可以渲染
      // var v = Symbol();//❌ 不渲染
      // // var v = {a: 100};// ❌ 报错， 执行失败
      // var v = false; //❌ 不渲染
      // var v = true; //❌ 不渲染
      // var v = <h2>虚拟 DOM 对象</h2>;//✅ 虚拟 DOM 对象作为 jsx 的子元素是可以渲染的
      // //数组也可以渲染, 但是必须要包含『数字』或者『字符串』或者『虚拟 DOM 对象』才可以
      // // var v = [false, null, undefined, 10, '离别长，欢聚短，若共把酒为歌，且斟余生一酌', <h3>慢也好，步伐小也罢，是往前走就好</h3>]; //

      // //数组在渲染时, 是将每个元素进行独立的渲染, 创建新的独立元素, 插入到文档中.
      // var v = [1,2,3, 'abc'];


      //2. 测试 JSX 的属性的渲染情况 usonb
      var v = undefined; // ❌ 不渲染, 设置连属性都不添加
      var v = '欲买桂花同载酒，荒泷天下第一斗';//✅
      var v = ''; // 标签会设置属性, 但是属性的值为 『空字符串』
      var v = Symbol();//❌ 不渲染, 设置连属性都不添加
      var v = {a: 100};// 渲染, 但是结果为『[object Object]』, 用的较少
      var v = 9527; //✅
      var v = null; //❌ 不渲染, 设置连属性都不添加
      var v = false;//❌ 不渲染, 设置连属性都不添加
      var v = true;//❌ 不渲染, 设置连属性都不添加

      //声明虚拟 DOM 对象
      // let vdom = <div title={v}>如果你看过大海，就不会介意池塘里的是非</div>;
      // var vdom = <div>{document.title}</div>;
      function getLength(){
        return window.history.length;
      }

      var vdom = <div>{getLength()}</div>;
      var vdom = <div>{'新鲜感，就是来源于生活中的小小仪式'}</div>;
      //不能在大括号中编写 js 语句
      // var vdom = <div>{if(true) return true;}</div>;

      

      ReactDOM.render(vdom, document.querySelector('#root'));
    </script>
  </body>
</html>
